<template>
  <div class="content">
    <div class="cart">
        <h3>购物车</h3>
        <div class="cart-wrapper">
            <div class="top">
                <span>商品</span>
                <span>价格</span>
                <span>数量</span>
                <span>总价</span>
                <span>删除</span>
            </div>
            <div class="item-wrapper" v-for="(item, index) in cartList" :key="index">
                <div class="check">
                    <input type="checkbox" @click="editCart('checked', item)">
                </div>
                <div class="img-wrapper">
                    <img :src="item.productImage" width="100px">
                </div>
                <span class="title">{{item.productName}}</span>
                <span class="price">￥ {{item.salePrice}}</span>
                <div class="steep">
                    <span @click="editCart('reduce', item)">-</span>
                    <span>{{item.productNum}}</span>
                    <span @click="editCart('add', item)">+</span>
                </div>
                <i>￥ {{item.salePrice * item.productNum}}</i>
                <van-icon name="cross" class="delete" @click="deleteCart(item.productId)" />
            </div>
        </div>
        <div class="total-wrapper">
            <div class="check">
                <van-checkbox v-model="checked"></van-checkbox>
            </div>
            <span class="totalCheck">全选</span>
            <span class="AllPrice">总价 ￥ 258.00</span>
            <div class="btn">下一步</div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data () {
    return {
      checked: '1',
      value: '1',
      cartList: [],
      checkGood: '1'
    }
  },
  mounted () {
    this.getCartList()
    console.log()
  },
  computed: {
  },
  methods: {
    getCartList () {
      axios.get('/users/cartList').then((response) => {
        console.log(response.data)
        let res = response.data
        this.cartList = res.result
      })
    },
    deleteCart (productId) {
      axios.post('/users/deleteCart', {
        productId: productId
      }).then((response) => {
        let res = response.data
        if (res.status === 0) {
          Toast('删除成功')
          this.getCartList()
        }
      })
    },
    editCart (flag, item) {
      if (flag === 'addNum') {
        item.productNum++
        console.log(item.productNum++)
      } else if (flag === 'reduce') {
        if (item.productNum <= 0) {
          return
        }
        item.productNum--
      } else {
        item.checked = item.checked === '1' ? '0' : '1'
      }
      console.log(item.productNum)
      axios.post('/users/editCart', {
        productId: item.productId,
        productNum: item.productNum,
        checked: item.checked
      }).then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
    background: url('http://tpl-c913457.pic-tpl.websiteonline.cn/upload/f08_0sxw.gif') no-repeat;
    .cart {
        width: 80%;
        // height: 500px;
        // background-color: pink;
        margin: 30px auto;
        h3 {
            font-size: 30px;
            font-weight: 500;
        }
        .cart-wrapper {
            .top {
                width: 100%;
                height: 50px;
                background-color: #fab965;
                display: flex;
                margin-top: 30px;
                span {
                    height: 50px;
                    display: inline-block;
                    width: 100px;
                    // border: 1px solid #000;
                    flex: 1;
                    justify-content: space-around;
                    text-align: center;
                    line-height: 50px;
                    font-size: 20px;
                }
            }
            .item-wrapper {
                height: 80px;
                // background-color: red;
                position: relative;
                border: 1px solid rgb(246, 165, 159);
                margin-top: 6px;
                .check {
                    position: absolute;
                    left: 25px;
                    top: 27px;
                }
                .img-wrapper {
                    position: absolute;
                    left: 72px;
                }
                .title {
                    position: absolute;
                    left: 188px;
                    top: 27px;
                    font-weight: 700;
                }
                .price {
                    position: absolute;
                    left: 340px;
                    top: 27px;
                    color: rgb(128, 125, 125);
                }
                .steep {
                    position: absolute;
                    left: 557px;
                    top: 27px;
                    span {
                        padding: 10px;
                        background-color: #ccc;
                        border-radius: 4px;
                    }
                }
                i {
                    position: absolute;
                    left: 817px;
                    top: 27px;
                    color: rgb(250, 75, 75);
                }
                .delete {
                    position: absolute;
                    left: 1083px;
                    top: 27px;
                }
            }
        }
        .total-wrapper {
            width: 100%;
            height: 80px;
            margin-top: 20px;
            border: 1px solid rgb(246, 165, 159);
            position: relative;
            .check {
                position: absolute;
                left: 25px;
                top: 30px;
            }
            .totalCheck {
                position: absolute;
                left: 71px;
                top: 21px;
                font-size: 20px;
            }
            .AllPrice {
                position: absolute;
                right: 118px;
                top: 32px;
                font-size: 20px;
            }
            .btn {
                width: 100px;
                height: 80px;
                background-color: rgb(248, 126, 126);
                position: absolute;
                right: -1px;
                text-align: center;
                line-height: 80px;
                cursor: pointer;
            }
        }
    }
}
</style>
